import Modal from "@/components/Modal";
import React, { forwardRef, useImperativeHandle, useState } from "react";

export interface FrowardProps {
  ON: () => void;
}

const Foward = forwardRef<FrowardProps>((props, ref) => {
  const [state, setState] = useState(false);
  useImperativeHandle(
    ref,
    () => ({
      ON: () => setState(!state),
    }),
    [state]
  );

  return (
    <Modal
      visible={state}
      onCancel={() => {
        setState(false);
      }}
    >
      <div
        style={{
          backgroundColor: "#fff",
          borderRadius: 8,
          width: 500,
          padding: 16,
        }}
      >
        Running tsc locally will compile the closest project defined by a
        tsconfig.json, you can compile a set of TypeScript files by passing in a
        glob of files you want.
      </div>
    </Modal>
  );
});

export default Foward;
